<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="utf-8">
    <title>会员约课</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="bookmark" href="${pageContext.request.contextPath}/favicon.ico"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/css/layui.css" media="all">
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/layui/layui.js"
            charset="utf-8"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/webjars/jquery/jquery.js"></script>
    <script type="application/javascript"
            src="${pageContext.request.contextPath}/private/js/loading/ajaxloading.js"></script>
    <style type="text/css">
        .laytable-cell-radio {
            padding: 10px 15px 0 15px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field">
    <legend>查询条件</legend>
    <form id="form1" class="layui-form" action="">
        <table width="96%" align="center">
            <tr height="23">
                <td align="center">课程名称:</td>
                <td>
                    <input type="hidden" id="userid" name="userid" value="${userid}" >
                    <input id="classname" name="classname" class="layui-input" type="text" placeholder="请输课程名称关键字"
                           autocomplete="off"
                           lay-verify="classname">
                </td>
                <td align="center">开课日期:</td>
                <td>
                    <input id="starttime" name="starttime" class="layui-input" type="text" placeholder="yyyy-MM-dd"
                           autocomplete="off"
                           lay-verify="starttime">
                </td>
                <td align="center">授课教练:</td>
                <td align="left">
                    <select id="coachid" name="coachid" lay-verify="coachid" lay-search>
                        <option value="">录入关键字查询并选择</option>
                    </select>
                </td>
            </tr>
            <tr height="23">
                <td colspan="6" align="center">
                    <button class="layui-btn" lay-submit lay-filter="query">查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </td>
            </tr>
        </table>
    </form>
</fieldset>

<fieldset class="layui-elem-field">
    <legend>课程列表</legend>
    <table class="layui-table" lay-filter="gridfilter"
           lay-data="{url:'',page:true, id:'gridresult',height:'330px',width:'1080',defaultToolbar: ['filter']}">
        <thead>
        <tr>
            <th lay-data="{type:'radio',width:'50'}"></th>
            <th lay-data="{field:'recordid',hide:true}">开班id</th>
            <th lay-data="{field:'classid',hide:true}">课程id</th>
            <th lay-data="{field:'coachid',hide:true}">教练id</th>
            <th lay-data="{field:'status',hide:true}">课程状态编码</th>
            <th lay-data="{field:'classname',align:'center',width:'120'}">课程名称</th>
            <th lay-data="{field:'agerange',align:'center',width:'120'}">适龄年龄段</th>
            <th lay-data="{field:'coachname',align:'center',width:'120'}">上课教练</th>
            <th lay-data="{field:'address',align:'center',width:'150'}">上课地点</th>
            <th lay-data="{field:'starttime',align:'center',width:'120'}">开课日期</th>
            <th lay-data="{field:'begintime',align:'center',width:'120'}">上课时间</th>
            <th lay-data="{field:'endtime',align:'center',width:'120'}">下课时间</th>

            <th lay-data="{field:'maxnum',align:'center',width:'120'}">最大上课人数</th>
            <th lay-data="{field:'currnum',align:'center',width:'120'}">报名人数</th>
            <th lay-data="{field:'statustext',align:'center',width:'120'}">课程状态</th>
        </tr>
        </thead>
    </table>

</fieldset>
<fieldset class="layui-elem-field">
    <legend>约课操作</legend>
    <form id="form2" class="layui-form" action="">
        <table width="96%" align="center">
            <tr height="23">
                <td align="center">约课孩子:</td>
                <td>
                    <input type="hidden" id="userid2" name="userid" value="${userid}" >
                    <c:forEach items="${childrens}" var="childrens">
                        <input name="childrens" title="${childrens.cname}" type="checkbox" value="${childrens.cid}">
                    </c:forEach>
                </td>
            <tr height="50">
                <td>
                    <button class="layui-btn" lay-submit lay-filter="saveappointmentinfo">约课</button>
                </td>
            </tr>
        </table>
    </form>
</fieldset>



</body>
<script type="application/javascript">
    var form;
    layui.use(['form', 'table','laydate'], function () {
        form = layui.form;
        //数据表格模块
        var table = layui.table;
        //日期控件
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#starttime' //指定元素
        });
        //监听提交
        form.on('submit(saveappointmentinfo)', function (data) {
            //1、校验table是否选中一条记录
            var checkStatus = table.checkStatus('gridresult'); //获取选中行状态
            var data = checkStatus.data;  //获取选中行数据
            if(!data||data.length==0) {
                layer.msg("请选择要预约的课程信息");
                return false;
            }
            var recordid = data[0].recordid;

            //2、校验是否至少选择了一个小孩
            var checkboxes = false;
            var childrens = "";
            $("input:checkbox[name='childrens']:checked").each(function() { // 遍历name=childrens的多选框
                childrens += $(this).val()+",";
                checkboxes = true;
            });
            if(!checkboxes) {
                layer.msg("请选择要约课的孩子");
                return false;
            }
            childrens = childrens.substring(0,childrens.length-1);
            //3、保存约课信息
            $.ajax({
                url:"${pageContext.request.contextPath}/eyas/appointmentinfo/saveAppointmentInfo",
                type:"POST",
                data:{recordid:recordid,userid:$('#userid2').val(),childrens:childrens},
                dataType:"json",
                success:function(result){
                    layer.msg("保存成功,页面将在1秒后关闭");
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },1000);
                },
                error:function(xdata){
                    layer.msg(xdata.responseJSON.errormsg);
                }
            });
            return false;
        });
        form.on('submit(query)', function (data) {
            table.reload('gridresult', {
                url: '${pageContext.request.contextPath}/eyas/recordinfo/queryRecordInfoForYK'
                , where: data.field //设定异步数据接口的额外参数
                , page: {
                    curr: 1
                },
                method:'get'
            });
            return false;
        });
        //头工具栏事件
        /*var checkStatus;
        table.on('toolbar(gridfilter)', function (obj) {
            if (obj.event === 'saveappointmentinfo') {
                checkStatus = table.checkStatus(obj.config.id); //获取选中行状态

            }
        });*/
        //加载教练下拉框
        selectCoachInfo();
    });


    function selectCoachInfo() {
        $.ajax({
            url:"${pageContext.request.contextPath}/eyas/coachinfo/queryCoachInfoList",
            type:"GET",
            dataType:"json",
            success:function(result){
                var list = result;    //返回的数据
                var role = document.getElementById("coachid");        //add_role_name给select定义的id
                for(var i=0;i<list.length;i++){
                    var option = document.createElement("option");    // 创建添加option属性
                    option.setAttribute("value",list[i].coachid);                  // 给option的value添加值
                    if(list[i].coachid=='${recordInfo.coachid}')
                        option.setAttribute("selected","selected");
                    option.innerText=list[i].coachname;             // 打印option对应的纯文本 （超级管理员、管理员）
                    role.appendChild(option);                          // 给select 添加option子标签
                }

                form.render("select");                                // 刷性select，显示出数据
            },
            error:function(xdata){
                layer.msg(xdata.responseJSON.errormsg);
            }
        });
    }

</script>
</html>
